<template>
  <div class="auto"  style="margin-top:10px;width:96%" >
      <div class="form-group auto">
        <label for="astartdate"   class="col-sm-2 control-label">启动日期(A):</label>
         <div class="col-sm-2">
           <datepicker id="astartdate"
           placeholder="开始日期"
           v-model="model.settings.astartdate"
           :value.sync="model.settings.astartdate"
           condition="f_eventdate >='{}'"
           :format="'yyyyMMdd'"
            :disabled-days-of-Week="[]"
           width="100%">
         </div>
         <label for="apricetype"   class="col-sm-2 control-label">计费类型(A):</label>
         <div class="col-sm-2"   >
           <v-select :value.sync="model.settings.apricetype" v-model="model.settings.apricetype"
               :options='apricetypes' placeholder='计费类型'
               close-on-select></v-select>
         </div>
         <label for="apriceperiod"   class="col-sm-2 control-label">计费周期(A):</label>
         <div class="col-sm-2" >
           <v-select :value.sync="model.settings.apriceperiod" v-model="model.settings.apriceperiod"
               :options='apriceperiods' placeholder='计费周期'
               close-on-select></v-select>
         </div>
       </div>

        <div class="form-group auto" style="margin-top:10px;">
          <label for="astepprices" class="col-sm-2 control-label">阶梯价格(A):</label>
          <div class="col-sm-8">
              <input type="text" class="form-control" v-model="model.settings.astepprices"  disabled="true" >
          </div>
        </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      payTypeSettingmodel: {},
      model: {
        meterno: '',
        settingtype: 3,
        settings: {
          bpricetype: '',
          apricetype: [],
          apriceperiod: [],
          bpriceperiod: '',
          astartdate: '',
          bstartdate: '29990101',
          bstepprices: [],
          astepprices: []
        }
      }
    }
  },
  props: ['data'],
  ready () {
    if (this.data) {
      this.model.meterno = this.data.f_meternumber
      this.getparam(this.data.f_price_id)
    }
  },
  watch: {
    'data' (val) {
      if (val) {
        this.model.meterno = val.f_meternumber
        this.getparam(val.f_price_id)
      }
    }
  },
  methods: {
    getparam (f_price_id) {
      this.$SqlService.getStairPrice(f_price_id)
      .then(
        (res) => {
          var length = res.data.length - 1
          res.data[length].max = 0
        //  console.log('res.data', res.data)
          this.model.settings.astepprices = JSON.stringify(res.data)
        // this.model.settings.bstepprices = JSON.stringify(res.data)
        }
      ).catch(
        (error) => this.$dispatch('error', '运行参数设置', this.data, error)
      )
    },
    converseparam () {
      this.model.settings.apriceperiod = this.model.settings.apriceperiod[0]
      this.model.settings.bpriceperiod = this.model.settings.apriceperiod
      this.model.settings.apricetype = this.model.settings.apricetype[0]
      this.model.settings.bpricetype = this.model.settings.apricetype
      this.model.settings.bstepprices = this.model.settings.astepprices
    }
  },
  computed: {
    apricetypes () {
      return [{label: '气量无阶梯', value: '0'},
        {label: '金额无阶梯', value: '1'},
        {label: '金额 2 阶梯', value: '2'},
        {label: '金额 3 阶梯', value: '3'},
        {label: '金额 4 阶梯', value: '4'},
        {label: '金额 5 阶梯', value: '5'},
        {label: '金额 6 阶梯', value: '6'}]
    },
    apriceperiods () {
      return [
        {label: '月阶梯', value: '1'},
        {label: '季阶梯', value: '2'},
        {label: '年阶梯', value: '3'},
        {label: '固定时间', value: '4'}]
    }
  }
}
</script>
